<template>
  <scroll :data="data" :loading="true" @loadMore="loadMore" :clicked="false">
    <ul>
      <li class="p-2_ m-2" @click="showInfo(item)" v-for="item in data" :key="item.id">
        <div class="title border-bottom d-flex justify-content-between align-items-center">
          <h2>{{item.noticeTitle}}</h2>
          <p>{{item.createTime | date}}</p>
        </div>
        <div class="outer" :class="[isRead ? 'active' : '']">
          <div class="content">
            <p>{{item.noticeContent}}</p>
          </div>
        </div>

      </li>
    </ul>
  </scroll>
</template>

<script>
import Scroll from "components/Scroll";

import {getNoticeList, updateNotice} from 'api/NoticeApi'
import { config } from "assets/js/data";

export default {
  name: "List",
  props: {
    type: String
  },
  components: {
    Scroll
  },
  data() {
    return {
      search: {
        currentIndex: 1,
        isRead: this.type,
        noticeType: config.notice.COLL_NEWS
      },
      data: [],
      totalPage: 1,
      isRead: false,
      notice: config.notice
    };
  },
  methods: {
    loadMore(currentIndex, $scroll) {
      if (currentIndex <= this.totalPage) {
        this.search.currentIndex = currentIndex;
        this.getNoticeList()
      } else $scroll.forceUpdate();
    },
    getNoticeList () {
      getNoticeList(this.search)
        .then(res => {
          if(res.meta.success) {
            this.data = this.data.concat(res.data.datas);
            this.totalPage = res.data.pagination.totalPage
          }
        });
    },
    showInfo (item) {
      this.isRead = !this.isRead
      //修改消息状态为已读
      if(item.isRead == config.notice.NO_READER) {
        updateNotice({
          id: item.id,
          isRead: config.notice.READER
        }).then(res => {
          if(res.meta.success) {
            this.getNoticeList()
          }
        });
      }
    }
  },
  created() {
    this.getNoticeList();
  }
};
</script>

<style lang="stylus" scoped>
li {
  background #FFF
  border-radius 5px
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  margin-bottom 5px
  
  .title {
    height 40px
    font-size  18px
  }
  .outer {
    _ellipsis(3)
    .content {
      line-height 24px
      padding 2vw 0
    }
  }

  .active {
    _ellipsis(20)
  }
}
</style>
